<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { onLoad ,onPageScroll } from "@dcloudio/uni-app";
import { getDetail, postSave } from "@/api/needs";

/** uni-forms 组件实例 */
const formRef = ref<InstanceType<UniHelper.UniForms> | null>(null);
const loading = ref(false);

/** 表单数据 */
const formData = reactive({
  id: undefined,
  title: '',
  desc: '',
  content: '',
  phone: '',
  anonymous: 1,
  days: 7
});

/** 校验规则 */
const formRules = {
  title: {
    rules: [
      {
        required: true,
        errorMessage: "请输入需求名称",
      },
    ],
  },
  desc: {
    rules: [
      {
        required: true,
        errorMessage: "请输入需求描述",
      },
    ],
  },
  content: {
    rules: [
      {
        required: true,
        errorMessage: "请输入需求内容",
      },
    ],
  },
  phone: {
    rules: [
      {
        required: true,
        errorMessage: "请输入联系方式",
      },
    ],
  },
};


const endDaysMap = [7,30,90,180];

/** 提交表单 */
function submitForm() {
  // 根据loading防止重复提交
  if (loading.value) return;
  // 表单校验
  formRef.value?.validate &&
    formRef.value.validate(async (err: any) => {
      // 如果校验成功 ，err 返回 null
      if (err) return false;

      loading.value = true;
      // 调用接口
      const data = await postSave(formData).finally(() => {
        loading.value = false;
      });

      if(data) uni.navigateTo({url: '/pages/user/needs'});
    });
}

const title = ref('发布需求');
onLoad(async (options)=>{
  if(options?.id){
    title.value = '编辑需求';
    uni.setNavigationBarTitle({ title: '编辑需求'});
    const data = await getDetail({id: options.id});
    Object.assign(formData, data);
  }
});


// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar :title="title" :isScrolled="isScrolled"></page-navbar>

    <page-title :title="title"></page-title>
    <view class="mx-4 mt-5">
      <uni-forms ref="formRef" label-width="0" :model="formData" :rules="formRules">
        <uni-forms-item name="title">
          <view class="text-(sm #333333) font-500">需求名称</view>
          <view class="mt-1 bg-white rounded-lg h-10 flex items-center px-3">
            <input v-model="formData.title" focus />
          </view>
        </uni-forms-item>

        <uni-forms-item name="desc">
          <view class="text-(sm #333333) font-500">需求描述</view>
          <view class="mt-1 bg-white rounded-lg h-10 flex items-center px-3">
            <input v-model="formData.desc" />
          </view>
        </uni-forms-item>

        <uni-forms-item name="content">
          <view class="text-(sm #333333) font-500">内容</view>
          <textarea class="mt-1 bg-white rounded-lg w-auto min-h-25 p-3" v-model="formData.content" :maxlength="-1"></textarea>
        </uni-forms-item>

        <uni-forms-item name="content">
          <view class="text-(sm #333333) font-500">联系方式</view>
          <view class="mt-1 bg-white rounded-lg h-10 flex items-center px-3">
            <input v-model="formData.phone" />
          </view>
        </uni-forms-item>

        <view class="mt-3 text-(sm #333333) font-500">有效期</view>
        <view class="mt-1 h-10 grid grid-cols-4 gap-3 text-sm">
          <view 
            class="flex items-center justify-around rounded-lg"
            :class="[formData.days == item ? 'border-(~ solid #1373FF) bg-#1373FF/10 text-#1373FF' : 'bg-white text-#3D3D3D']"
            v-for="item in endDaysMap" :key="item"
            @click="formData.days=item"
          >{{item}}天</view>
        </view>

        <view class="mt-3 text-(sm #333333) font-500">匿名</view>
        <view class="mt-1 h-10 grid grid-cols-2 gap-3 text-sm">
          <view 
            class="flex items-center justify-around rounded-lg"
            :class="[formData.anonymous == 1 ? 'border-(~ solid #1373FF) bg-#1373FF/10 text-#1373FF' : 'bg-white text-#3D3D3D']" 
            @click="formData.anonymous = 1"
          >匿名发布</view>
          <view 
            class="flex items-center justify-around rounded-lg"
            :class="[formData.anonymous == 2 ? 'border-(~ solid #1373FF) bg-#1373FF/10 text-#1373FF' : 'bg-white text-#3D3D3D']" 
            @click="formData.anonymous = 2"
          >公开发布</view>
        </view>
      </uni-forms>
    </view>
    <view class="mt-8 mx-4">
      <uv-button
        type="primary"
        size="large"
        :text="formData.id ? '更新提交' : '立即发布'"
        :custom-style="{
          fontSize: '18px',
          backgroundImage: 'linear-gradient(to right, #5199F9, #0164E6)',
          height: '48px',
          borderRadius: '8px',
          borderColor: 'transparent'
        }"
        @click="submitForm"
      ></uv-button>

      <view class="h-5"></view>
    </view>
  </view>
</template>
